<template>
    <div class="a4-container">
      <div class="header">
        <h1>A4用户界面</h1>
        <div class="user-info">
          <span class="welcome">欢迎，</span>
          <span class="username">{{ username }}</span>
          <button class="logout-btn" @click="handleLogout">退出登录</button>
        </div>
      </div>
      
      <!-- 视图切换按钮 -->
      <div class="view-switch">
        <el-radio-group v-model="currentView" @change="handleViewChange" size="large">
          <el-radio-button label="last">QA对审核</el-radio-button>
          <el-radio-button label="file">文件审核</el-radio-button>
        </el-radio-group>
      </div>
      
      <div class="main-content">
        <!-- PDF预览部分 -->
        <div class="section pdf-section">
          <div class="section-header">
            <h2>PDF文件预览</h2>
            <div class="header-actions" v-if="currentView === 'file'">
              <el-button type="primary" @click="refreshFileList">
                <el-icon><Refresh /></el-icon>
                刷新列表
              </el-button>
            </div>
          </div>
          <!-- 最近查看列表 -->
          <div class="pdf-list" v-if="currentView === 'last' && pdfList.length > 0">
            <div v-for="item in pdfList" 
                 :key="item.id" 
                 :class="['pdf-item', { active: currentPdf?.id === item.id }]">
              <div class="pdf-info" @click="selectPdf(item)">
                <span class="pdf-name">{{ item.fileName || item.articleTitle || '未命名文件' }}</span>
                <span class="pdf-time">上传时间：{{ new Date(item.createTime).toLocaleString() }}</span>
                <div class="pdf-summary" v-if="item.contentSummary">
                  <p>内容摘要：{{ item.contentSummary }}</p>
                </div>
              </div>
              <div class="pdf-actions">
                <el-button 
                  type="primary" 
                  size="small" 
                  @click.stop="downloadPdf(item)"
                  :loading="item.downloading">
                  <el-icon><Download /></el-icon>
                  下载
                </el-button>
              </div>
            </div>
          </div>
          <!-- 文件列表视图 -->
          <div class="pdf-list" v-if="currentView === 'file' && fileViewList.length > 0">
            <div v-for="item in fileViewList" 
                 :key="item.id" 
                 class="pdf-item">
              <div class="pdf-info">
                <span class="pdf-name">{{ item.fileName || item.articleTitle || '未命名文件' }}</span>
                <span class="pdf-time">上传时间：{{ new Date(item.createTime).toLocaleString() }}</span>
                <div class="pdf-summary" v-if="item.contentSummary">
                  <p>内容摘要：{{ item.contentSummary }}</p>
                </div>
              </div>
              <div class="pdf-actions">
                <el-button 
                  type="success" 
                  size="small" 
                  @click="approveFile(item)"
                  :disabled="item.status === 1">
                  通过
                </el-button>
                <el-button 
                  type="danger" 
                  size="small" 
                  @click="rejectFile(item)"
                  :disabled="item.status === 2">
                  驳回
                </el-button>
                <el-button 
                  type="primary" 
                  size="small" 
                  @click="submitFileStatus(item)"
                  :disabled="!item.status || item.status === 0"
                  :loading="loading">
                  提交
                </el-button>
                <el-button 
                  type="primary" 
                  size="small" 
                  @click="downloadPdf(item)"
                  :loading="item.downloading">
                  <el-icon><Download /></el-icon>
                  下载
                </el-button>
              </div>
            </div>
          </div>
          <div v-else class="no-data">暂无待审核的PDF文件</div>
        </div>

        <!-- QA对审核部分 -->
        <div class="section qa-section" v-if="currentPdf">
          <div class="section-header">
            <h2>问答对审核</h2>
            <div class="header-actions">
              <el-button 
                type="success" 
                @click="saveAllChanges"
                :disabled="!hasChanges">
                提交
              </el-button>
            </div>
          </div>

          <div class="qa-list" v-if="qaList.length > 0">
            <div class="qa-navigation">
              <span class="qa-counter">问答对 {{ currentPage }}/{{ qaList.length }}</span>
            </div>
            <div :class="['qa-item', { 'qa-item-approved': currentQa.status === 'approved', 'qa-item-rejected': currentQa.status === 'rejected' }]">
              <div class="qa-header">
                <span class="qa-index">问答对 #{{ currentPage }}</span>
                <div class="qa-status" v-if="currentQa.status">
                  <el-tag :type="getStatusType(currentQa.statusCode)">
                    {{ currentQa.status }}
                  </el-tag>
                </div>
              </div>
              <div class="qa-content">
                <div class="qa-field">
                  <label>问题：</label>
                  <div class="qa-text" v-if="!currentQa.editing">{{ currentQa.instruction }}</div>
                  <el-input
                    v-else
                    v-model="currentQa.instruction"
                    type="textarea"
                    rows="3"
                    placeholder="请输入问题"
                  />
                </div>
                <div class="qa-field">
                  <label>答案：</label>
                  <div class="qa-text" v-if="!currentQa.editing">{{ currentQa.output }}</div>
                  <el-input
                    v-else
                    v-model="currentQa.output"
                    type="textarea"
                    rows="5"
                    placeholder="请输入答案"
                  />
                </div>
                <div class="qa-actions">
                  <div class="qa-edit-actions" v-if="currentQa.editing">
                    <el-button type="primary" @click="confirmEdit(currentPage - 1)">确认</el-button>
                    <el-button @click="cancelEdit(currentPage - 1)">取消</el-button>
                  </div>
                  <div class="qa-review-actions" v-else>
                    <el-button type="primary" @click="editQa(currentPage - 1)" 
                      :disabled="currentQa.status === 'approved' || currentQa.status === 'rejected'">
                      编辑
                    </el-button>
                    <el-button 
                      :type="currentQa.status === 'approved' ? 'info' : 'success'"
                      @click="currentQa.status === 'approved' ? cancelApprove(currentPage - 1) : approveQa(currentPage - 1)"
                      :disabled="currentQa.status === 'rejected'">
                      {{ currentQa.status === 'approved' ? '取消通过' : '通过' }}
                    </el-button>
                    <el-button 
                      :type="currentQa.status === 'rejected' ? 'info' : 'danger'"
                      @click="currentQa.status === 'rejected' ? cancelReject(currentPage - 1) : rejectQa(currentPage - 1)"
                      :disabled="currentQa.status === 'approved'">
                      {{ currentQa.status === 'rejected' ? '取消驳回' : '驳回' }}
                    </el-button>
                  </div>
                </div>
                <div class="qa-feedback" v-if="currentQa.feedback">
                  <label>驳回原因：</label>
                  <div class="feedback-text">{{ currentQa.feedback }}</div>
                </div>
              </div>
            </div>
            <div class="qa-navigation-buttons">
              <el-button 
                :disabled="currentPage === 1"
                @click="currentPage--"
                type="primary"
                plain>
                上一个
              </el-button>
              <el-button 
                :disabled="currentPage === qaList.length"
                @click="currentPage++"
                type="primary"
                plain>
                下一个
              </el-button>
            </div>
          </div>
          <div v-else class="no-data">当前PDF文件暂无问答对</div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import { ref, computed, onMounted } from 'vue';
  import { useRouter } from 'vue-router';
  import { ElMessage, ElMessageBox } from 'element-plus';
  import request from '@/utils/request';
  import { Download, Refresh } from '@element-plus/icons-vue';
  import axios from 'axios';
  
  export default {
    name: 'A4Main',
    components: {
      Download,
      Refresh
    },
    setup() {
      const router = useRouter();
      const username = ref('');
      const pdfList = ref([]);
      const fileViewList = ref([]);
      const currentView = ref('last');
      const currentPdf = ref(null);
      const qaList = ref([]);
      const originalQaList = ref([]);
      const loading = ref(false);
      const currentPage = ref(1);
      const qaStatusList = ref([]);
      const fileStatusList = ref([]);

      // 计算是否有更改
      const hasChanges = computed(() => {
        if (currentView.value === 'last') {
          return qaStatusList.value.length > 0;
        } else {
          return fileStatusList.value.length > 0;
        }
      });

      // 计算当前显示的QA对
      const currentQa = computed(() => {
        return qaList.value[currentPage.value - 1] || {};
      });

      // 获取PDF列表
      const fetchPdfList = async () => {
        try {
          loading.value = true;
          const response = await request.get('http://localhost:8080/api/me/reviewTask/file');
          console.log("返回的数据", response.data);
          
          if (response.data.code === 200) {
            // 获取每个文件的详细信息
            const fileDetails = await Promise.all(
              response.data['last-view'].map(async (item) => {
                try {
                  const detailResponse = await request.get(`http://localhost:8080/api/file/info/${item.fileId}`);
                  if (detailResponse.data.code === 200) {
                    return {
                      ...item,
                      downloading: false,
                      fileName: detailResponse.data.data.fileName
                    };
                  }
                  return {
                    ...item,
                    downloading: false,
                    fileName: `文件${item.fileId}`
                  };
                } catch (error) {
                  console.error(`获取文件${item.fileId}详情失败:`, error);
                  return {
                    ...item,
                    downloading: false,
                    fileName: `文件${item.fileId}`
                  };
                }
              })
            );
            
            pdfList.value = fileDetails;
          } else {
            throw new Error(response.data.msg || '获取PDF列表失败');
          }
        } catch (error) {
          console.error('获取PDF列表失败:', error);
          ElMessage.error('获取PDF列表失败');
        } finally {
          loading.value = false;
        }
      };

      // 获取QA列表
      const fetchQaList = async (pdfId) => {
        try {
          loading.value = true;
          
          const response = await request.get(`http://localhost:8080/api/me/reviewTask/qa/${pdfId}`);
          console.log("请求的文件id：", pdfId);
          console.log("问答对数据：", response.data);
          
          if (response.data.code === 200) {
            const qaData = response.data['qa-last'] || [];
            
            qaList.value = qaData.map(qa => ({
              ...qa,
              editing: false,
              status: getStatusText(qa.status),
              statusCode: qa.status,
              feedback: qa.feedback || ''
            }));
            
            originalQaList.value = JSON.parse(JSON.stringify(qaList.value));
            qaStatusList.value = [];
            currentPage.value = 1;
          } else {
            qaList.value = [];
            originalQaList.value = [];
            qaStatusList.value = [];
            throw new Error(response.data.msg || '获取问答对数据失败');
          }
        } catch (error) {
          console.error('获取问答对列表失败:', error);
          ElMessage.error('获取问答对列表失败');
        } finally {
          loading.value = false;
        }
      };

      // 获取状态文本
      const getStatusText = (status) => {
        switch (status) {
          case 1:
            return '等待审核';
          case 2:
            return '计算机老师审核通过';
          case 3:
            return '计算机老师审核不通过';
          case 4:
            return '最后审核通过';
          case 5:
            return '最后审核不通过';
          case 6:
            return '被标记';
          default:
            return '未知状态';
        }
      };

      // 获取状态类型（用于标签颜色）
      const getStatusType = (status) => {
        switch (status) {
          case 1:
            return 'info';
          case 2:
            return 'success';
          case 3:
            return 'danger';
          case 4:
            return 'success';
          case 5:
            return 'danger';
          case 6:
            return 'warning';
          default:
            return 'info';
        }
      };

      // 选择PDF
      const selectPdf = async (pdf) => {
        if (hasChanges.value) {
          const confirm = window.confirm('有未保存的更改，是否继续？');
          if (!confirm) return;
        }
        currentPdf.value = pdf;
        // 无论获取数据成功与否，都重置页码为1
        currentPage.value = 1;
        await fetchQaList(pdf.id);
      };

      // 编辑QA对
      const editQa = (index) => {
        qaList.value[index].editing = true;
      };

      // 删除QA对
      const deleteQa = (index) => {
        if (confirm('确定要删除这个问答对吗？')) {
          qaList.value.splice(index, 1);
        }
      };

      // 确认编辑
      const confirmEdit = async (index) => {
        try {
          const qa = qaList.value[index];
          
          const requestData = {
            output: qa.output,
            input: "",
            system: "",
            instruction: qa.instruction,
            creatorId: 0,
            id: qa.id,
            fileId: currentPdf.value.id,
            status: qa.statusCode || 0
          };

          console.log("更新QA对的数据：", requestData);
          const response = await request.post('http://localhost:8080/api/update/qa', requestData);
          
          if (response.data.code === 200) {
            ElMessage.success('更新成功');
            qa.editing = false;
            // 更新原始数据
            originalQaList.value[index] = { ...qa };
          } else {
            throw new Error(response.data.msg || '更新失败');
          }
        } catch (error) {
          console.error('更新失败:', error);
          ElMessage.error('更新失败');
        }
      };

      // 取消编辑
      const cancelEdit = (index) => {
        const originalQa = originalQaList.value[index];
        qaList.value[index] = { ...originalQa, editing: false };
      };

      // 保存所有更改
      const saveAllChanges = async () => {
        try {
          loading.value = true;
          const response = await request.post('http://localhost:8080/api/view/qa/last', qaStatusList.value);
          
          if (response.data.code === 200) {
            ElMessage.success('提交成功');
            qaStatusList.value = [];
            // 重新获取QA列表和PDF列表
            await Promise.all([
              fetchQaList(currentPdf.value.id),
              fetchPdfList()
            ]);
            // 重新获取QA对列表
            if (currentPdf.value) {
              await fetchQaList(currentPdf.value.id);
            }
          } else {
            throw new Error(response.data.msg || '提交失败');
          }
        } catch (error) {
          console.error('提交失败:', error);
          ElMessage.error('提交失败');
        } finally {
          loading.value = false;
        }
      };

      // 通过问答对
      const approveQa = async (index) => {
        try {
          const qa = qaList.value[index];
          qa.status = 'approved';
          qa.feedback = '';
          
          const existingIndex = qaStatusList.value.findIndex(item => item.id === qa.id);
          if (existingIndex !== -1) {
            qaStatusList.value[existingIndex].status = 1;
          } else {
            qaStatusList.value.push({
              id: qa.id,
              status: 1
            });
          }
          
          ElMessage.success('审核通过成功');
        } catch (error) {
          console.error('审核通过失败:', error);
          ElMessage.error('审核通过失败');
        }
      };

      // 驳回问答对
      const rejectQa = async (index) => {
        try {
          const qa = qaList.value[index];
          qa.status = 'rejected';
          qa.feedback = '';
          
          const existingIndex = qaStatusList.value.findIndex(item => item.id === qa.id);
          if (existingIndex !== -1) {
            qaStatusList.value[existingIndex].status = 2;
          } else {
            qaStatusList.value.push({
              id: qa.id,
              status: 2
            });
          }
          
          ElMessage.success('驳回成功');
        } catch (error) {
          console.error('驳回失败:', error);
          ElMessage.error('驳回失败');
        }
      };

      // 取消通过
      const cancelApprove = async (index) => {
        try {
          const qa = qaList.value[index];
          qa.status = null;
          qa.feedback = '';
          
          qaStatusList.value = qaStatusList.value.filter(item => item.id !== qa.id);
          
          ElMessage.success('已取消通过');
        } catch (error) {
          console.error('取消通过失败:', error);
          ElMessage.error('取消通过失败');
        }
      };

      // 取消驳回
      const cancelReject = async (index) => {
        try {
          const qa = qaList.value[index];
          qa.status = null;
          qa.feedback = '';
          
          qaStatusList.value = qaStatusList.value.filter(item => item.id !== qa.id);
          
          ElMessage.success('已取消驳回');
        } catch (error) {
          console.error('取消驳回失败:', error);
          ElMessage.error('取消驳回失败');
        }
      };

      // 退出登录
      const handleLogout = () => {
        localStorage.removeItem('isLoggedIn');
        localStorage.removeItem('username');
        localStorage.removeItem('userRole');
        localStorage.removeItem('token');
        router.push('/login');
      };

      // 下载PDF文件
      const downloadPdf = async (pdf) => {
        if (!pdf.downloading) {
          pdf.downloading = true;
          try {
            const response = await request({
              url: `http://10.137.10.169:8080/api/file/download/${pdf.fileId}`,
              method: 'GET',
              responseType: 'blob'
            });
            
            // 创建下载链接
            const blob = new Blob([response.data], { type: 'application/pdf' });
            const url = window.URL.createObjectURL(blob);
            const link = document.createElement('a');
            link.href = url;
            link.download = pdf.articleTitle || `文件_${pdf.fileId}.pdf`;
            
            // 触发下载
            document.body.appendChild(link);
            link.click();
            
            // 清理
            document.body.removeChild(link);
            window.URL.revokeObjectURL(url);

            ElMessage.success('下载成功');
          } catch (error) {
            console.error('下载失败:', error);
            ElMessage.error('下载失败，请重试');
          } finally {
            pdf.downloading = false;
          }
        }
      };

      // 处理视图切换
      const handleViewChange = (view) => {
        currentView.value = view;
        if (view === 'file') {
          currentPdf.value = null;
          qaList.value = [];
          fileStatusList.value = [];
          fetchFileViewList();
        } else {
          fetchPdfList();
        }
      };

      // 获取文件列表视图数据
      const fetchFileViewList = async () => {
        try {
          loading.value = true;
          const response = await request.get('http://localhost:8080/api/me/reviewTask/file');
          console.log("文件列表数据：", response.data);
          
          if (response.data.code === 200) {
            // 获取每个文件的详细信息
            const fileDetails = await Promise.all(
              response.data['file-view'].map(async (item) => {
                try {
                  const detailResponse = await request.get(`http://localhost:8080/api/file/info/${item.fileId}`);
                  if (detailResponse.data.code === 200) {
                    return {
                      ...item,
                      downloading: false,
                      status: 0,
                      fileName: detailResponse.data.data.fileName
                    };
                  }
                  return {
                    ...item,
                    downloading: false,
                    status: 0,
                    fileName: `文件${item.fileId}`
                  };
                } catch (error) {
                  console.error(`获取文件${item.fileId}详情失败:`, error);
                  return {
                    ...item,
                    downloading: false,
                    status: 0,
                    fileName: `文件${item.fileId}`
                  };
                }
              })
            );
            
            fileViewList.value = fileDetails;
          } else {
            throw new Error(response.data.msg || '获取文件列表失败');
          }
        } catch (error) {
          console.error('获取文件列表失败:', error);
          ElMessage.error('获取文件列表失败');
        } finally {
          loading.value = false;
        }
      };

      // 通过文件
      const approveFile = async (file) => {
        try {
          const existingIndex = fileStatusList.value.findIndex(item => item.id === file.id);
          if (existingIndex !== -1) {
            fileStatusList.value[existingIndex].status = 1;
          } else {
            fileStatusList.value.push({
              id: file.id,
              status: 1
            });
          }
          file.status = 1;
          ElMessage.success('已标记为通过');
        } catch (error) {
          console.error('操作失败:', error);
          ElMessage.error('操作失败');
        }
      };

      // 驳回文件
      const rejectFile = async (file) => {
        try {
          const existingIndex = fileStatusList.value.findIndex(item => item.id === file.id);
          if (existingIndex !== -1) {
            fileStatusList.value[existingIndex].status = 2;
          } else {
            fileStatusList.value.push({
              id: file.id,
              status: 2
            });
          }
          file.status = 2;
          ElMessage.success('已标记为驳回');
        } catch (error) {
          console.error('操作失败:', error);
          ElMessage.error('操作失败');
        }
      };

      // 提交文件状态
      const submitFileStatus = async (file) => {
        try {
          loading.value = true;
          const fileStatus = fileStatusList.value.find(item => item.id === file.id);
          if (!fileStatus) {
            ElMessage.warning('请先选择通过或驳回');
            return;
          }

          const response = await request.post('http://localhost:8080/api/view/file', [fileStatus]);
          
          if (response.data.code === 200) {
            ElMessage.success('提交成功');
            // 从状态列表中移除已提交的文件
            fileStatusList.value = fileStatusList.value.filter(item => item.id !== file.id);
            // 刷新文件列表
            await fetchFileViewList();
          } else {
            throw new Error(response.data.msg || '提交失败');
          }
        } catch (error) {
          console.error('提交失败:', error);
          ElMessage.error('提交失败');
        } finally {
          loading.value = false;
        }
      };

      // 刷新文件列表
      const refreshFileList = async () => {
        await fetchFileViewList();
      };

      onMounted(() => {
        username.value = localStorage.getItem('username') || '用户';
        fetchPdfList();
      });

      return {
        username,
        pdfList,
        fileViewList,
        currentView,
        currentPdf,
        qaList,
        hasChanges,
        loading,
        selectPdf,
        editQa,
        deleteQa,
        confirmEdit,
        cancelEdit,
        saveAllChanges,
        handleLogout,
        currentPage,
        currentQa,
        approveQa,
        rejectQa,
        downloadPdf,
        cancelApprove,
        cancelReject,
        getStatusText,
        getStatusType,
        handleViewChange,
        approveFile,
        rejectFile,
        refreshFileList,
        submitFileStatus
      };
    }
  };
  </script>
  
  <style scoped>
  .a4-container {
    width: 100%;
    height: 100vh;
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
  }
  
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eaeaea;
  }
  
  .user-info {
    display: flex;
    align-items: center;
  }
  
  .welcome {
    font-size: 16px;
    color: #606266;
  }
  
  .username {
    font-size: 16px;
    font-weight: bold;
    color: #409EFF;
    margin: 0 10px;
  }
  
  .logout-btn {
    background-color: #f56c6c;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 8px 16px;
    cursor: pointer;
  }
  
  .logout-btn:hover {
    background-color: #e64242;
  }
  
  .main-content {
    display: flex;
    gap: 20px;
    flex: 1;
    min-height: 0;
    height: calc(100vh - 100px); /* 减去header和padding的高度 */
    margin-top: 20px;
  }
  
  .section {
    background: white;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
    height: 100%; /* 设置高度为100% */
    display: flex;
    flex-direction: column;
  }
  
  .pdf-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* 防止内容溢出 */
  }
  
  .qa-section {
    flex: 2;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* 防止内容溢出 */
  }
  
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #ebeef5;
  }
  
  .section-header h2 {
    margin: 0;
    font-size: 18px;
    color: #303133;
  }
  
  .header-actions {
    display: flex;
    gap: 10px;
  }
  
  .pdf-list {
    overflow-y: auto;
    flex: 1;
    margin-top: 10px; /* 添加一些顶部间距 */
  }
  
  .pdf-item {
    padding: 16px;
    border: 1px solid #eaeaea;
    border-radius: 8px;
    margin-bottom: 12px;
    background-color: #fff;
    transition: all 0.3s ease;
  }
  
  .pdf-item:hover {
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
  }
  
  .pdf-item.active {
    border-color: #409EFF;
    background-color: #ecf5ff;
  }
  
  .pdf-info {
    flex: 1;
    margin-right: 20px;
  }
  
  .pdf-name {
    font-size: 16px;
    font-weight: 600;
    color: #303133;
    margin-bottom: 8px;
    display: block;
  }
  
  .pdf-time {
    font-size: 13px;
    color: #909399;
    margin-bottom: 8px;
    display: block;
  }
  
  .pdf-summary {
    font-size: 14px;
    color: #606266;
    line-height: 1.6;
    margin-top: 8px;
  }
  
  .pdf-actions {
    display: flex;
    gap: 8px;
    align-items: center;
  }
  
  .pdf-actions .el-button {
    padding: 8px 16px;
    font-size: 13px;
  }
  
  .pdf-actions .el-button [class*="el-icon"] + span {
    margin-left: 4px;
  }
  
  /* 添加动画效果 */
  .pdf-item {
    animation: fadeIn 0.3s ease-in-out;
  }
  
  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  /* 优化按钮样式 */
  .el-button {
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.3s ease;
  }
  
  .el-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
  
  .el-button:active {
    transform: translateY(0);
  }
  
  /* 优化加载状态 */
  .loading-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    color: #909399;
    font-size: 14px;
  }
  
  .loading-indicator .el-icon {
    margin-right: 8px;
    animation: rotating 2s linear infinite;
  }
  
  @keyframes rotating {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
  
  .qa-list {
    overflow-y: auto;
    flex: 1;
    margin-top: 10px; /* 添加一些顶部间距 */
  }
  
  .qa-navigation {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
  }
  
  .qa-counter {
    font-size: 16px;
    font-weight: bold;
    color: #409EFF;
  }
  
  .qa-navigation-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
  }
  
  .qa-item {
    margin: 0 auto;
    max-width: 800px;
    border: 1px solid #eaeaea;
    border-radius: 4px;
    margin-bottom: 16px;
    padding: 16px;
  }
  
  .qa-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
  }
  
  .qa-actions {
    display: flex;
    gap: 8px;
  }
  
  .qa-field {
    margin-bottom: 12px;
  }
  
  .qa-field label {
    font-weight: bold;
    margin-bottom: 4px;
    display: block;
  }
  
  .qa-text {
    padding: 8px;
    background-color: #f5f7fa;
    border-radius: 4px;
    min-height: 24px;
  }
  
  textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    resize: vertical;
  }
  
  .qa-edit-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 12px;
  }
  
  button {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s;
  }
  
  .edit-btn {
    background-color: #409EFF;
    color: white;
  }
  
  .delete-btn {
    background-color: #f56c6c;
    color: white;
  }
  
  .confirm-btn {
    background-color: #67c23a;
    color: white;
  }
  
  .cancel-btn {
    background-color: #909399;
    color: white;
  }
  
  .save-btn {
    background-color: #67c23a;
    color: white;
    padding: 8px 20px;
  }
  
  .save-btn:disabled {
    background-color: #c0c4cc;
    cursor: not-allowed;
  }
  
  .no-data {
    text-align: center;
    color: #909399;
    padding: 20px;
  }
  
  button:hover:not(:disabled) {
    opacity: 0.8;
  }
  
  .qa-item-approved {
    border-color: #67C23A;
    background-color: #f0f9eb;
  }
  
  .qa-item-rejected {
    border-color: #F56C6C;
    background-color: #fef0f0;
  }
  
  .qa-feedback {
    margin-top: 15px;
    padding: 10px;
    background-color: #fff;
    border-radius: 4px;
  }
  
  .qa-feedback label {
    color: #F56C6C;
    font-weight: bold;
    margin-bottom: 5px;
    display: block;
  }
  
  .feedback-text {
    color: #F56C6C;
    font-size: 14px;
    line-height: 1.5;
  }

  .view-switch {
    margin: 0 0 20px 0;
    text-align: center;
    padding: 15px;
    background-color: #f5f7fa;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  }

  .view-switch :deep(.el-radio-group) {
    display: inline-flex;
    gap: 10px;
  }

  .view-switch :deep(.el-radio-button__inner) {
    padding: 12px 30px;
    font-size: 14px;
    font-weight: 500;
  }
  </style> 